
<script setup>
import {ref} from 'vue';

const props = defineProps({
  StuId: String
});

const learning_hour=ref('28');
const average_score=ref('93');
const stu_loaded_day = ref((1814400) / 3600 / 24);

var joinedCourseSetNum = 0;
var exitCourseSetNum = 0;
var exitCourseNum = 0;
var joinedCourseNum = 4;
var learnedSeconds = 101017;
var finishedTaskNum = 78;
var createdTime = 1638212404;
var updatedTime = 1640026804;
var score_average = 100;

//这部分到时候由后端计算返回，直接代入，不计算
var diversity = joinedCourseNum + joinedCourseSetNum;
var persistence = joinedCourseNum - exitCourseNum - exitCourseSetNum;
var hard_working = learnedSeconds / 3600;
var vitality = (updatedTime - createdTime) / (360 * 24 * 31);
var score_point = score_average;
</script>


<template>
  <div>
    <!-- <div style="font-weight:bold;color:white;font-size:0.6em;text-align: left;">
      基本情况
    </div> -->

  <el-descriptions class="margin-top" :column="1" :size="size" border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
           学生ID 
          </div>
        </template>
        {{ StuId }} 
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
           学习时长 
          </div>
        </template>
        {{ learning_hour }} 小时
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <GoldMedal />
            </el-icon>
          平均成绩 
          </div>
        </template>
        {{average_score}} 分 / 每科
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <School />
            </el-icon>
          累计活跃天数 
          </div>
        </template>
        {{stu_loaded_day}} 天
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <EditPen />
            </el-icon>
         完成任务数量 
          </div>
        </template>
        {{finishedTaskNum}} 个
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item" style="color:black">
            <el-icon :style="iconStyle">
              <DataAnalysis />
            </el-icon>
      参加课程数 
          </div>
        </template>
        {{joinedCourseNum}} 节
      </el-descriptions-item>

  </el-descriptions>
  </div>
  </template>
  
  <style scoped>
  
  .el-descriptions {
    margin-top: 20px;
  }

  .cell-item {
    height:5vh;
    display: flex;
    align-items: center;
  }

  .margin-top {
    margin-top: 20px;
  }
</style>
  